import {
  AppleFilled,
  AppleOutlined,
  MacCommandFilled,
  MacCommandOutlined,
  WindowsFilled,
  WindowsOutlined
} from "@ant-design/icons"
import Icon from "@ant-design/icons/lib/components/Icon"
import { Button, Dropdown, message, type MenuProps } from "antd"
import DropdownButton from "antd/es/dropdown/dropdown-button"
import useMessage from "antd/es/message/useMessage"
import useModal from "antd/es/modal/useModal"
import React, { useMemo, useState, type PropsWithChildren } from "react"

import { CleanHistory, KeyBoardIcon, KeyEscIcon } from "~components/iconData"
import { useOIMsg } from "~hook/useOIMsg"
import { useChatStore } from "~store/chatStore"
import { getStyleContainerRoot } from "~util"

export default function DropDownMenu({ children }: PropsWithChildren) {
  const delChats = useChatStore((state) => state.delContent)
  const [msg, contextHolder] = useOIMsg()
  const [modal, moadalContextHolder] = useModal()
  const [open, setOpen] = useState<boolean>(false)
  const items: MenuProps["items"] = useMemo(
    () => [
      {
        icon: <CleanHistory className="text-base" />,
        key: 1,
        label: (
          <div className=" text-left w-full h-full text-gray-500">
            Clear Chat History
          </div>
        ),
        onClick: () => {
          delChats()
          msg.success("Delete Chat History Success")
        }
      },
      {
        icon: <KeyBoardIcon className="text-base" />,
        key: 2,
        label: (
          <div className=" text-left w-full h-full text-gray-500">
            Shortcut Key
          </div>
        ),
        onClick: () => {
          modal.confirm({
            open: open,
            icon: <KeyBoardIcon></KeyBoardIcon>,
            title: " Shortcut Key",
            content: (
              <div>
                <p>
                  quit:
                  <span>
                    <KeyEscIcon className=" text-lg" />
                  </span>
                </p>
                <p>open/close:</p>
                <ol className=" list-none">
                  <li>
                    <AppleFilled></AppleFilled>:
                    <span>
                      Option+
                      <MacCommandFilled />
                      +A
                    </span>
                  </li>
                  <li>
                    <WindowsFilled />:
                    <span>
                      Alt+<WindowsFilled></WindowsFilled>+A
                    </span>
                  </li>
                </ol>
              </div>
            ),
            getContainer: () => getStyleContainerRoot(),
            onOk: () => {},
            onCancel: () => {
              setOpen(false)
            }
          })
        }
      }
    ],
    [open]
  )
  return (
    <>
      {contextHolder}
      {moadalContextHolder}
      <Dropdown
        menu={{ items }}
        getPopupContainer={() => getStyleContainerRoot()}>
        {children}
      </Dropdown>
    </>
  )
}
